<template>
<!-- 备件订单代提报 -->
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="true"
      :onColumnsChange="columns => this.columns = columns"
      :onRowSelectChange ="selectDataHandle"
    >      
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="add()">新 增</el-button>
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="batchSubmission()">批量提报</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="importData()">导 入</el-button> -->
      </template>
    </FilterTable>

    <BaseDialog
      :visible.sync="issearch"
      :title="'服务商查询'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <ownerSeacher  @close="dealercloseHandler" />
    </BaseDialog>

    <Drawer
      :visible.sync="addPageSwitch"
      :title="pageTitle"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <addPage :openType="openType" :editOrDetailRow="editOrDetailRow"  @close="close" />
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import {orderProxyReportFind,cancelOrder} from '@/api/partsmanage/aduitOrder/orderProxyReport';
import ownerSeacher from '@/pages/partsmanage/claim/approve/ownerSeacher';
import addPage from '@/pages/partsmanage/purchaseManage/orderWaitReport/customPopup/addPage';

export default {
  name: "orderProxyReport",
  mixins: [dictionary],
  components: {ownerSeacher,addPage},
  data() {
    return{
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchApi: orderProxyReportFind,
      issearch: false,
      addPageSwitch: false,
      fetchParams: {xhrAbort: true},
      selectArrData:[],
      openType:"",
      editOrDetailRow:null,
      pageTitle:''
    };
  },
  async created() {
  },
  methods: {
    close(){
        this.addPageSwitch = false;
        this.changeHandle(this.fetchParams);
    },
    add(){
        //点击新增按钮
        this.addPageSwitch = true;
        this.openType = "add";
        this.pageTitle ="代提报新增";
        this.editOrDetailRow = null;
    },
    batchSubmission(){
        //点击批量提报
    },
    importData(){
        //点击导入
    },
    edit(row){
        //点击当前行编辑
        this.addPageSwitch = true;
        this.openType = "edit";
        this.pageTitle ="代提报编辑"
        this.editOrDetailRow = row;

    },
    detail(row){
        //点击当前行详情
        this.addPageSwitch = true;
        this.openType = "detail";
        this.pageTitle ="代提报明细"
        this.editOrDetailRow = row;

    },
    cancel(row){
        //点击当前行作废
        this.$confirm('确认作废', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          cancelOrder(row.orderId).then(res =>{
            if(res.resultCode ==200 && res.success == true){
              this.$message({
                  type: 'success',
                  message: '作废成功!'
              });
              this.close();
            }
          })

        })

    },
    selectDataHandle(arr){
        //选择列发生改变回调
        this.selectArrData = arr;
    },
    createTopFilterList() {
      return[
        {
          type: 'INPUT',
          label: '服务商代码',
          fieldName: 'dealerCode',
          placeholder: '请选择',
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.seacherFun()}></el-button>
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: '服务商简称',
          fieldName: 'dealerName',
          placeholder: '请输入',
        },
        {
          type: 'INPUT',
          label: '备件订单号',
          fieldName: 'purchaseCode',
          placeholder: '请输入...'
        },
        
        {
          type: 'SELECT',
          label: '订单状态',
          fieldName: 'purchaseStatus',
          itemList: this.createDictList('3002',[30021002,30021003,30021009,30021010]),
          placeholder: '请选择...',
          clearable:false
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'stockInType',
          itemList: this.createDictList('3003'),
          initialValue:30031001,
          placeholder: '请选择...',
          clearable:false
        },
        {
          type: 'RANGE_DATE',
          fieldName: 'createdStartDate|createdEndDate',
          label: '创建日期',
          initialValue: [],
          dateType: 'daterange'
        }
      ]
    },
    createTableColumns () {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          align:"center",
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          width: 150,
          render: params => {
            return (
              <div>
                <el-button type="text" disabled={params.row.orderStatus != 30021001 && params.row.orderStatus != 30021004} size="mini" onClick={() => this.edit(params.row)}>
                  修改
                </el-button>
                <el-button type="text" size="mini" onClick={() => this.detail(params.row)}>
                  明细
                </el-button>
                <el-button type="text" disabled={params.row.orderStatus != 30021001 && params.row.orderStatus != 30021004} size="mini" onClick={() => this.cancel(params.row)}>
                  作废
                </el-button>
              </div>
            );
          }
        },
        {
          title: '服务商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          align:"center"
        },
        {
          title: '服务商简称',
          dataIndex: 'dealerName',
          sorter: true,
          align:"center"
        },
        {
          title: '备件订单号',
          dataIndex: 'purchaseNo',
          sorter: true,
          width: 180,
          align:"center"
        },
        {
          title: '订单类型',
          dataIndex: 'orderType',
          sorter: true,
          align:"center",
          dictItems: this.createDictList('3003')
        },
        {
          title: '订单状态',
          dataIndex: 'orderStatus',
          sorter: true,
          align:"center",
          dictItems: this.createDictList('3002')
        },
        {
          title: '订购品种合计',
          dataIndex: 'purchaseTotalVariety',
          sorter: true,
          // precision: 2,
          align:"center",
          // numberFormat: true
        },
        {
          title: '订购数量合计',
          dataIndex: 'purchaseTotalCount',
          sorter: true,
          // precision: 2,
          align:"center",
          // numberFormat: true
        },
        {
          title: '订购金额合计',
          dataIndex: 'purchaseTotalAmount',
          sorter: true,
          precision: 2,
          align:"center",
          numberFormat: true
        },
        {
          title: '创建日期',
          dataIndex: 'orderTime',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          align:"center",
          filterType: 'date-range'
        },
        {
          title: '上报日期',
          dataIndex: 'reportTime',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          align:"center",
          filterType: 'date-range'
        },
        {
          title: '订单说明',
          dataIndex: 'remark',
          sorter: true,
          align:"center",
        }
      ]
    },
    seacherFun(){
      this.issearch = true
    },
    dealercloseHandler(val){
      console.info(val)
      if(val){
        this.topFilterList.find(x=>x.fieldName=='dealerCode').initialValue=val.dealerCode;
        this.topFilterList.find(x=>x.fieldName=='dealerName').initialValue=val.dealerShortname;
      }
      this.issearch=false;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
  }
}
</script>